
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<style>
    .red {
        color: red !important;
    }

    .search {
        width: 300px;
        margin: 20px 0;
    }

    .my-form {
        display: flex;
        margin: 20px 0;
    }

    .my-form input {
        flex: 1;
        margin-right: 20px;
    }

    .table> :not(:first-child) {
        border-top: none;
    }

    .contain {
        display: flex;
        padding: 10px;
    }

    .list-box {
        flex: 1;
        padding: 0 30px;
    }

    .list-box a {
        text-decoration: none;
    }

    .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }

    tfoot {
        font-weight: bold;
    }

    @media screen and (max-width: 1000px) {
        .contain {
            flex-wrap: wrap;
        }

        .list-box {
            width: 100%;
        }

        .echarts-box {
            margin-top: 30px;
        }
    }
</style>

<body>
    <div id="app">
        <div class="contain">
            <!-- 左侧列表 -->
            <div class="list-box">

                <!-- 添加资产 -->
                <form class="my-form">
                    <input type="text" v-model.trim="name"  class="form-control" placeholder="消费名称" />
                    <input type="text" v-model.number="price" class="form-control" placeholder="消费价格" />
                    <button type="button" class="btn btn-primary" @click="add">添加账单</button>
                </form>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>消费名称</th>
                            <th>消费价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in list" :key="item.id">
                            <td>{{index+1}}</td>
                            <td>{{item.name}}</td>
                            <td :class="{red:item.price>500}">{{item.price}}</td>
                            <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">消费总计： {{totalPrice}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- 右侧图表 -->
            <div class="echarts-box" id="main"></div>
        </div>
    </div>
    <script src="./axios.min.js"></script>
    <script src="./vue.js"></script>
    <script src="./echarts.min.js"></script>
    <script>
        /**
             * 接口文档地址：
             * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
             * 
             * 功能需求：
             * 1. 基本渲染
             * 2. 添加功能
             * 3. 删除功能
             * 4. 饼图渲染
             */
        const app = new Vue({
            el: '#app',
            data: {
                list: [],
                name:'',
                price:'',
                myChart: null
            },
            mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '消费清单',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '消费内容',
              type: 'pie',
              radius: '50%',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option);
      },
            computed:{
            totalPrice(){
            return this.list.reduce((prev,item)=>prev+item.price,0)
           }
            },
            created(){
               this.getList()
            },
            methods: {
                // 获取数据接口
                async getList() {
                    let { data: { data } } = await axios({
                        url: 'https://applet-base-api-t.itheima.net/bill',
                        params: {
                            creator: '啦啦啦'
                        }
                    })
                    
                    //console.log(data);
                    this.list = data
                },
                // 删除功能
                async del(id) {
                    let res = await axios({
                        url: `https://applet-base-api-t.itheima.net/bill/${id}`,
                        method: 'delete'
                    })
                    this.getList()
                },
                // 添加功能
                async add(){
                    // 判断输入值不为空
                    if(this.name===''||this.price===''){
                        alert('消费项目和价格不能为空')
                        return
                    }
                    let res=await axios({
                        url:'https://applet-base-api-t.itheima.net/bill',
                        method:'post',
                        data:{
                            creator: '啦啦啦',
                            name:this.name,
                            price:this.price
                        }
                    })
                    this.getList()
                    this.name=''
                    this.price=''
                }
            }
        })
    </script>
</body>

</html>
